import{_ as e}from"./framework-c27b6911.js";import{o as i,c as n,e as s}from"./app-32a7af8e.js";const l={},a=s(`<h2 id="vue技术点" tabindex="-1"><a class="header-anchor" href="#vue技术点" aria-hidden="true">#</a> Vue技术点</h2><h3 id="vue导出json数据到excel表格" tabindex="-1"><a class="header-anchor" href="#vue导出json数据到excel表格" aria-hidden="true">#</a> Vue导出json数据到Excel表格</h3><p>一、安装依赖</p><div class="language-JavaScript line-numbers-mode" data-ext="JavaScript"><pre class="language-JavaScript"><code>npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>二、下载两个所需要的js文件Blob.js和 Export2Excel.js。</p><p>文件地址</p><p>三、src目录下新建vendor文件夹，将Blob.js和 Export2Excel.js放进去。</p><p>四、更改webpack.base.conf.js配置</p><p>在resolve的alias：</p><p>&#39;vendor&#39;: path.resolve(__dirname, &#39;../src/vendor&#39;) 五、在.vue文件中 script部分：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>data(){
  return{
    list:[
        {
          name:&#39;韩版设计时尚风衣大&#39;,
          number:&#39;MPM00112&#39;,
          salePrice:&#39;￥999.00&#39;,
          stocknums:3423,
          salesnums:3423,
          sharenums:3423,
      },
      {
          name:&#39;韩版设计时尚风衣大&#39;,
          number:&#39;MPM00112&#39;,
          salePrice:&#39;￥999.00&#39;,
          stocknums:3423,
          salesnums:3423,
          sharenums:3423,
      },
    ]
  }
 
methods:{
    formatJson(filterVal, jsonData) {
    　　　　return jsonData.map(v =&gt; filterVal.map(j =&gt; v[j]))
    　　},
    export2Excel() {
    　　　　require.ensure([], () =&gt; {
    　　　　　　const { export_json_to_excel } = require(&#39;../../../vendor/Export2Excel&#39;);
    　　　　　　const tHeader = [&#39;商品名称&#39;,&#39;商品货号&#39;,&#39;售价&#39;,&#39;库存&#39;,&#39;销量&#39;,&#39;分享&#39;,];
    　　　　　　const filterVal = [&#39;name&#39;, &#39;number&#39;, &#39;salePrice&#39;, &#39;stocknums&#39;, &#39;salesnums&#39;, &#39;sharenums&#39;, ];
    　　　　　　const list = this.list;
    　　　　　　const data = this.formatJson(filterVal, list);
    　　　　　　export_json_to_excel(tHeader, data, &#39;商品管理列表&#39;);
    　　　　})
    　 }
}
template:

&lt;button @click=&quot;export2Excel&quot;&gt;导出&lt;/button&gt;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这里说明一下：</p><p>export2Excel()中require的路径因个人项目结构不同可能需要单独调整，如果报module not found &#39;../../Export2Excel.js&#39;之类请自行修改路径。 tHeader是每一栏的名称，需手动输入。 filterVal是data中list的key值，也是要自己写的。 这里记得要与data里面的list名称对应</p><h3 id="vue做文件上传" tabindex="-1"><a class="header-anchor" href="#vue做文件上传" aria-hidden="true">#</a> Vue做文件上传</h3><p>使用的是element-ui</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>&lt;el-upload
ref=&quot;uploadMutiple&quot;
:auto-upload=&quot;false&quot;
action=&quot;Fake Action&quot;
:on-success=&quot;allHandleSuccess&quot;
:on-change=&quot;handleChange&quot;
:file-list=&quot;fileList&quot;
:http-request=&quot;allUpload&quot;
:before-upload=&quot;beforeUpload&quot;
multiple
&gt;上传文件&lt;/el-upload&gt;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>handleChange(file, fileList) {
      this.fileList = fileList;
      console.log(this.fileList);
    },
    beforeUpload(file) {
      console.log(file);
    },
    allHandleSuccess() {},
    allUpload() {},
    addStockMateriel() {
      this.$refs.uploadMutiple.submit();
      let formData = new FormData();
      this.fileList.forEach(item =&gt; {
        console.log(item);
        formData.append(&quot;files&quot;, item.raw); //与后台约定的一样（files）
      });
      axios(&quot;up_photo&quot;, formData, false).then(res =&gt; {});
	},
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,17),d=[a];function r(t,v){return i(),n("div",null,d)}const o=e(l,[["render",r],["__file","092103.html.vue"]]);export{o as default};
